<template>
  <view class="stats-section">
    <view class="stats-card">
      <!-- 添加装饰性波浪元素 -->
      <view class="decoration-wave"></view>
      
      <view class="stat-item">
        <text class="stat-number">{{ count }}</text>
        <text class="stat-label">今日次数</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-number">{{ totalAmount }}</text>
        <text class="stat-label">总奶量 (ml)</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item milk-totals">
        <view class="milk-total-row">
          <text class="milk-total-label">母乳</text>
          <text class="milk-total-number">{{ breastMilkTotal }}</text>
        </view>
        <view class="milk-total-row">
          <text class="milk-total-label">奶粉</text>
          <text class="milk-total-number">{{ formulaMilkTotal }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'StatsCard',
  props: {
    // 传入的记录数量
    count: {
      type: Number,
      default: 0
    },
    // 传入的总奶量
    totalAmount: {
      type: Number,
      default: 0
    },
    // 传入的母乳总量
    breastMilkTotal: {
      type: Number,
      default: 0
    },
    // 传入的奶粉总量
    formulaMilkTotal: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped>
/* 统计卡片样式 - 直接从milk-record复制 */
.stats-section {
  margin-bottom: 30rpx;
  position: relative;
  z-index: 5;
}

/* 修改统计卡片样式，增强视觉层次感 */
.stats-card {
  background: linear-gradient(135deg, #ff8a9b, #ff6b9d);
  border-radius: 30rpx;
  padding: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 15rpx 40rpx rgba(255, 107, 157, 0.5), 0 5rpx 15rpx rgba(255, 255, 255, 0.2) inset; /* 增强阴影效果，添加内阴影 */
  flex-wrap: wrap;
  gap: 20rpx;
  position: relative;
  border: 2rpx solid rgba(255, 255, 255, 0.4); /* 增加白色边框 */
  overflow: hidden;
  transform: translateY(-5rpx); /* 微抬高 */
  animation: subtle-float 4s ease-in-out infinite; /* 添加轻微浮动动画 */
}

/* 添加轻微浮动动画 */
@keyframes subtle-float {
  0%, 100% {
    transform: translateY(-5rpx);
  }
  50% {
    transform: translateY(-10rpx);
  }
}

/* 添加装饰性波浪动画 */
.decoration-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 15rpx;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    rgba(255, 255, 255, 0) 100%);
  opacity: 0.5;
  animation: wave-animation 8s linear infinite; /* 添加波浪动画 */
}

@keyframes wave-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 为统计数字添加动画效果 */
.stat-number {
  display: block;
  font-size: 54rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3), 0 0 15rpx rgba(255, 255, 255, 0.6); /* 增强文字发光效果 */
  letter-spacing: 1rpx;
  position: relative;
  z-index: 2;
  color: white;
}

.stat-label {
  font-size: 24rpx;
  opacity: 0.9;
  color: white;
}

/* 添加更多装饰元素 */
.stats-card::after {
  content: '';
  position: absolute;
  bottom: -30rpx;
  left: -30rpx;
  width: 120rpx;
  height: 120rpx;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  opacity: 0.6;
}

/* 添加右上角装饰 */
.stats-card::before {
  content: '';
  position: absolute;
  top: -30rpx;
  right: -30rpx;
  width: 150rpx;
  height: 150rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 0.8;
}

.stat-item {
  text-align: center;
  color: white;
  flex: 1;
  min-width: 120rpx;
}

.stat-divider {
  width: 2rpx;
  height: 60rpx;
  background-color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.milk-totals {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.milk-total-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.milk-total-number {
  font-size: 32rpx;
  font-weight: bold;
  color: white;
}

.milk-total-label {
  font-size: 24rpx;
  color: white;
  opacity: 0.9;
}
</style> 